<template>
  <div class="body">
    <div class="search">
      <el-input v-model="keywords"
                placeholder="请输入歌名或歌手名"
                size="large"
                autocomplete="off"
                style="width: 350px"
                clearable
                @input="selectShowMusic">
        <template #prefix>
          <el-icon><Search/></el-icon>
        </template>
      </el-input>
    </div>
    <div class="header">
      <div class="index">序号</div>
      <div class="song">歌曲</div>
      <div class="artist">歌手</div>
      <div class="album">专辑</div>
      <div class="time">
        <div class="other-info"></div>
        <div class="total-time">时长</div>
      </div>
    </div>
    <div class="content" v-for="(music,index) in musicObj">
      <!--序号-->
      <div class="index">{{index+1}}</div>
      <div class="song">
        <!--图片-->
        <img :src="music.picUrl" :alt="music.name" class="img"/>
        <!--歌名-->
        <span class="title">{{music.name}}</span>
      </div>
      <!--歌手-->
      <div class="artist">{{music.singer}}</div>
      <!--专辑-->
      <div class="album">{{music.album}}</div>
      <div class="time">
        <div class="other-info">
          <!--歌曲播放-->
          <div class="play-btn" @click="playOrAdd(music,true)">
            <el-icon><CaretRight/></el-icon>
          </div>
          <!--歌曲添加-->
          <div class="song-add" @click="playOrAdd(music,false)">
            <el-icon><Plus/></el-icon>
          </div>
          <!--下载歌曲-->
          <div class="download" @click="downLoadMusicFile(music.url,music.singer+'-'+music.name,music.contentType)">
            <el-icon><Download/></el-icon>
          </div>
        </div>
        <!--时间-->
        <div class="total-time">{{music.totalTime}}</div>
      </div>
    </div>
    <!--分页-->
    <div class="pagination">
      <div>
        <el-pagination
            :hide-on-single-page="isShow"
            v-model:current-page="currentPageNum"
            :page-size="10"
            :pager-count="5"
            layout="prev, pager, next"
            :total="total"
            @current-change="currentPageNumChange"/>
      </div>
    </div>
    <Play
        :playOrAdd="musicInfo"
        :msgNote="playOrAddInfo"
        @changeMsg="changeMsg"
        @deleteMusic="removeMusic"
        @changStatus="updatePlayStatus">
    </Play>
  </div>
</template>

<script setup>
  import {computed, getCurrentInstance, onMounted, ref} from "vue";
  import Play from "@/components/Play.vue";
  import axios from "axios";
  const msg = getCurrentInstance().appContext.config.globalProperties.$message

  let keywords=ref();

  let musicInfo=ref({
    music: [],
    id:"",           //正在播放的id,如果不是不是正在播放，设置为""
    status:""        //状态
  });

  //消息
  let playOrAddInfo=ref("");

  //更改消息事件函数
  function changeMsg(msg){
    playOrAddInfo.value=msg;
  }

  let musicObj=ref([]);
  //当前页码
  let currentPageNum=ref(1);
  //总数量
  let total=ref(0);

  //当只有一页时，分页隐藏
  let isShow=ref(true);

  function updatePlayStatus(id,status){
    musicInfo.value.id=id;
    musicInfo.value.status=status;
  }

  //添加或播放
  function playOrAdd(music,isPlay){
    let flag=false;
    musicInfo.value.music.forEach((musicData)=>{
       //判断是否重复添加，flag为true,表示重复添加
      if(musicData.id===music.id){
          flag=true;
      }
    });

    if(!flag){
      musicInfo.value.music.push(music);
      if(isPlay){
        //播放的音乐背景颜色要变成hover时颜色----需要添加
        updatePlayStatus(music.id,"NoDataAndPlay");
        playOrAddInfo.value="正在播放";
      }else{
        musicInfo.value.status="NoDataAndNoPlay";
        playOrAddInfo.value="已添加到列表";
      }
    }else{
      if(isPlay){
        if(musicInfo.value.id===""){
          //有数据但是从来没有播放过
          updatePlayStatus(music.id,"HasDataNeverPlay");
          playOrAddInfo.value="正在播放";
        }
        if(musicInfo.value.id!=="" && musicInfo.value.id!==music.id){
          //有数据上一个播放或者暂停的不是我
          updatePlayStatus(music.id,"HasDataPrePlayOrPausedIsNotMe");
          playOrAddInfo.value="正在播放";
        }
        if(musicInfo.value.id!=="" && musicInfo.value.id===music.id && musicInfo.value.status==="paused"){
          //有数据上一个暂停的是我
          musicInfo.value.status="HasDataPrePausedIsMe";
          playOrAddInfo.value="正在播放";
        }
        if(musicInfo.value.id!=="" && musicInfo.value.id===music.id && musicInfo.value.status==="play"){
          playOrAddInfo.value="播放中";
        }
      }else{
        playOrAddInfo.value="列表中已存在";
      }
    }
  }

  //删除
  function removeMusic(id){
    //如果id为null则为全部删除,否则只删除一个
    if(id==null){
      //删除全部信息，并且将其他信息全部恢复原始
      musicInfo.value.music.splice(0,musicInfo.value.music.length);
      musicInfo.value.id="";
      musicInfo.value.status="";
    }else{
      let flag=0;
      musicInfo.value.music.forEach((music,index)=>{
        if(music.id===id){
            flag=index;
        }
      });
      if(musicInfo.value.id==="" || (musicInfo.value.id!=="" && musicInfo.value.id!==id)){
        musicInfo.value.music.splice(flag,1);
      }
      //3 如果当前有播放的歌曲或者暂停的歌曲，但是删除的是播放的歌曲或者暂停的歌曲
      if(musicInfo.value.id!=="" && musicInfo.value.id===id){
        musicInfo.value.id="";
        musicInfo.value.status="";
        musicInfo.value.music.splice(flag,1);
      }
    }
  }

  //当前页码改变时
  function currentPageNumChange(){
    selectShowMusic();
  }

  //下载音乐文件
  function downLoadMusicFile(musicUrl,musicName,contentType){
    const options={
      url:"/music/download",
      data:{ url: musicUrl},
      method:"POST",
      headers:{"Content-Type":"application/x-www-form-urlencoded"},
      responseType: "blob"
    }
    axios(options).then(res=>{
      const blob=new Blob([res.data],{ type: contentType });
      let link=document.createElement("a");
      link.href=window.URL.createObjectURL(blob);
      link.style.display="none";
      link.download=musicName;
      document.body.appendChild(link);
      link.click();
      window.URL.revokeObjectURL(link.href);
      document.body.removeChild(link);
    });
  }

  //查询展示的音乐数据
  function selectShowMusic(){
    const options={
      url:"/music/selectShowMusic",
      params:{
        keywords: keywords.value,
        currentPage:currentPageNum.value
      },
      method:"GET",
      headers:{"Content-Type":"application/json"},
    }
    //查询信息放心musicObj
    axios(options).then(res=>{
      let mg = res.data;
      if (mg.meta.code === 200) {
        //将数据放入
        musicObj.value=mg.data.musicShowVO;
        total.value=mg.data.total;
      } else {
        msg.error(mg.meta.msg);
      }
    }).catch(err => {
      //网络异常啥的
      msg.error(err);
    })
  }
  //当挂载之后,获取数据
  onMounted(()=>{
    selectShowMusic();
  })
</script>

<style scoped lang="less">
/*minx混入*/	

#search-header-content-pagination-CommonStyle{
  margin:0 20%;
  cursor: pointer;
}

#img-title-commonStyle{
  display: inline-block;
}
 
.body{
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #292c2d;
  .search{
	#search-header-content-pagination-CommonStyle;  
    margin-top: 20px; 
  }
  .header{
	#search-header-content-pagination-CommonStyle;  
    margin-top: 20px;
    color: #8f8989;
	
    &>div{
      background-color: rgba(0.1,0.1,0.1,0.05);
    }
	
    div{
  	  text-align: center;
  	  height: 50px;
  	  line-height: 50px;
  	  float: left; 
    }
	.index{
	  width:6%;
	}
	.song{
	  display: flex;
	  align-items: center;
	  width: 40%;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	}
	.artist,.album{
	  width:17%;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	}
	
	.time{
	  width:20%;
	  .other-info{
	    width: 70%;
	    float: left;
	  }
	  .total-time{
	    text-align: center;
	    width: 30%;
	    float: right;
	  } 
	  &::after{
	    clear: both;
	  }
	}
	&::after{
	  clear: both;  
	}  
  }
  
  .content{
    margin:0 20%;
    cursor: pointer;
    #search-header-content-pagination-CommonStyle;
    //做一下优化
    div{
  	  text-align: center;
  	  height: 50px;
  	  line-height: 50px;
  	  float: left;  
    }
    
    .index{
      width:6%;
    }
    
    .song{
      display: flex;
      align-items: center;
      width: 40%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
	  .img{
	    max-width: 100%;
	    max-height: 100%;
	    float: left;
		#img-title-commonStyle
	  } 
	  .title{
	    margin-left: 15px;
	    float: left;
	    #img-title-commonStyle
	  }
	  &::after{
	    clear: both;
	  }
    }
	.artist,.album{
	  width:17%;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	}
		
	.time{
	  width:20%;
	  .other-info{
	    width: 70%;
	    float: left;
		.play-btn,.song-add,.download{
		  width: 33%;
		  display: none;
		}
	  }
	  .total-time{
	    text-align: center;
	    width: 30%;
	    float: right;
	  }
	  &::after{
	    clear: both;
	  }   
	}
	
	//做一下优化
	&:hover>div{
	  background-color: rgba(0.5,0.5,0.5,0.1);
	}
	
	//做一下优化
	&:hover {
	  .play-btn,.song-add,.download{
	    display: block !important;	
	  } 
	}
	//做一下优化
	&::after{
	  clear: both;  
	}		   
  }
  .pagination{
    height: 30px;
    display: inline-block;
    text-align: center;
    #search-header-content-pagination-CommonStyle;
	.el-pagination{
	  justify-content: center !important;
	}
  }
}

	
/*	
.body{
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #292c2d;
}

.header,.content,.pagination,.search{
  margin:0 20%;
  cursor: pointer;
}

.search{
  margin-top: 20px;
}

.header{
  margin-top: 20px;
  color: #8f8989;
}

.pagination{
  height: 30px;
  display: inline-block;
  text-align: center;
}

.el-pagination{
  justify-content: center !important;
}

.header::after,.content::after{
  clear: both;
}

.header div,.content div{
  text-align: center;
  height: 50px;
  line-height: 50px;
  float: left;
}

.header>div{
  background-color: rgba(0.1,0.1,0.1,0.05);
}

.content:hover>div{
  background-color: rgba(0.5,0.5,0.5,0.1);
}

.content:hover .play-btn{
  display: block;
}

.content:hover .song-add{
  display: block;
}

.content:hover .download{
  display: block;
}

.index{
  width:6%;
}

.song{
  display: flex;
  align-items: center;
  width: 40%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.song::after{
  clear: both;
  display: table;
}

.img,.title{
  display: inline-block;
}

.img{
  max-width: 100%;
  max-height: 100%;
  float: left;
}

.title{
  margin-left: 15px;
  float: left;
}

.artist{
  width:17%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.album{
  width:17%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.time{
  width:20%;
}

.time::after{
  clear: both;
  display: table;
}

.other-info{
  display:block;
  width: 70%;
  float: left;
}

.play-btn,.song-add,.download{
  width: 33%;
  display: none;
}

.total-time{
  text-align: center;
  width: 30%;
  float: right;
}
*/
</style>
